<template>
  <div class="page">
    <div class="banner">
      <div class="step">
        <div class="jd_box">
          <div class="jd_tags" v-for="(item, index) in steps" :key="item">
            <div class="jd_zt">
              <div :class="index != 0 ? 'line' : ' unline'"></div>
              <div class="pot">
                <div :class="stepIdx == index ? 'a_pot' : ''">
                  {{ index + 1 }}
                </div>
              </div>
              <div :class="index != steps.length - 1 ? 'line' : 'unline'"></div>
            </div>
            <div class="jd_t">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content" v-if="stepIdx === 0">
      <div class="zr_box">
        <div class="zb_nr_title">责任须知</div>
        <div class="zb_nr">
          现实生活中我们经常会发布各种各样的声明，这些声明一经发布，是会发生相应的法律后果的，因此我们要考虑清楚之后再发布，写这些声明书的时候也要仔细斟酌。下面找法网小编将提供债权债务责任声明书范本供大家参考，希望对大家有所帮助。
          一、债权债务责任声明书范本
          　　本人于年月日与北京军港精汇房地产经纪有限公司签订加盟协议。作为北京军港精汇房地产经纪有限公司分公司店加盟合作。我店地址是。
          　　现本人与北京军港精汇房地产经纪有限公司协商后解除加盟协议，本人做出声明和承诺如下
          　　1、在我经营管理活动中无任何合同纠纷、无任何债权债务。
          　　2、本人自行承担在加盟经营期间发生的所有债权债务与该公司及其股东无关。
          　　3、我店现行的未到期的业务合同由本人负责履行完毕。所牵扯出的任何问题由本人负责解决并承担一切后果。
          　　4、因本人加盟过程中发生的任何业务纠纷或债务，导致北京军港精汇房地产经纪有限公司遭受任何经济损失的，本人愿承担赔偿责任和相应的法律责任。
          　　声明人签字： 　　身份证号：
        </div>
        <div class="footer">
          <button>不同意</button>
          <button class="btn_zc" @click="stepIdx++">同意</button>
        </div>
      </div>
    </div>
    <div class="content" v-if="stepIdx === 1">
      <div class="form_cont">
        <el-form
          ref="ruleForm"
          :model="form"
          label-width="190px"
          :rules="rules"
        >
          <el-form-item label="单位名称（个人姓名）：" prop="dwmc">
            <el-input
              placeholder="请用单位全称（个人真实姓名）中文名进行注册"
              v-model="form.dwmc"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input
              placeholder="请输入"
              v-model="form.password"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="qrpassword">
            <el-input
              placeholder="请输入"
              v-model="form.qrpassword"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录名：" prop="username">
            <el-input placeholder="请输入" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="统一社会/信用代码：" prop="xydm">
            <el-input placeholder="请输入" v-model="form.xydm"></el-input>
          </el-form-item>
          <el-form-item label="申请（经办人）人：" prop="sbr">
            <el-input placeholder="请输入" v-model="form.sbr"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="lxdh">
            <el-input placeholder="请输入" v-model="form.lxdh"></el-input>
          </el-form-item>
          <el-form-item label="用户类型：" prop="yhlx">
            <el-radio-group v-model="form.yhlx">
              <el-radio
                :label="label"
                v-for="label in userTypes"
                :key="label"
                :size="label"
                >{{ label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="验证码：" prop="code">
            <div class="rows">
              <el-input placeholder="请输入" v-model="form.code"></el-input
              ><img class="code" :src="captchaImage" @click="getCode"/>
            </div>
          </el-form-item>
        </el-form>
        <button class="btn" @click="submit">确认</button>
      </div>
    </div>
    <div class="content" v-if="stepIdx === 2">
      <div class="login_content">

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //电话格式验证
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入电话号码"));
      }
      if (!/^1[34578]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      }
      callback();
    };
    return {
      step: 0,
      steps: ["责任须知", "注册信息", "注册完成"],
      stepIdx: 0,
      form: {
        dwmc: "",
        username: "",
        password: "",
        qrpassword: "",
        xydm: "",
        sbr: "",
        lxdh: "",
        yhlx: "",
        code: "",
        uuid: "",
      },
      userTypes: [
        "施工单位",
        "招标单位",
        "招标（建设）单位",
        "供应商",
        "勘察单位",
        "设计单位",
        "资产处置（招租）人",
        "造价单位",
        "监理单位",
        "竞买（租）人",
      ],
      rules: {
        dwmc: [
          {
            required: true,
            message: "请输入单位名称（个人姓名）",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        qrpassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入登录名", trigger: "blur" },
        ],
        xydm: [
          {
            required: true,
            message: "请输入统一社会/信用代码",
            trigger: "blur",
          },
        ],
        sbr: [
          {
            required: true,
            message: "请输入申请（经办人）人",
            trigger: "blur",
          },
        ],
        lxdh: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "blur",
          },
          {
           validator:validatePhone,trigger: "blur"
          }
        ],
        yhlx: [
          {
            required: true,
            message: "请输入用户类型",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      uuid: "",
      captchaImage:""
    };
  },
  created(){
    this.getCode()
  },
  methods: {
    getCode() {
      this.$api.captchaImageAPI().then((res)=>{
        let {img,uuid} = res;
        this.uuid = uuid;
        //base64前缀
        this.captchaImage = `data:image/png;base64,${img}`
      })
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$api.registerAPI({ ...this.form, uuid: this.uuid }).then((ite) => {
            this.stepIdx++;
          },()=>{
            this.getCode()
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.el-radio {
  margin-bottom: 21px;
}
.rows {
  display: flex;
  justify-content: space-between;
}
.rows .code {
  width: 120px;
  height: 40px;
  background-color: #ccc;
  margin-left: 15px;
}
.btn {
  height: 40px;
  background-color: rgb(0, 81, 255);
  color: white;
  width: 120px;
  border-radius: 50px;
  margin: 0 auto;
  margin-top: 20px;
}
.page {
  background-color: #f1f4f6;
  min-height: 100vh;
}
.content {
  margin: 0 auto;
  width: 1200px;
}
.zr_box {
  background-color: white;
}
.zb_nr_title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding-top: 21px;
}
.zb_nr {
  line-height: 31px;
  padding: 15px;
  color: #807e7e;
}
.login_content{
   background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 31px 20%;
}
.form_cont {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 31px 20%;
}
.footer {
  display: flex;
  justify-content: center;
  margin: 41px;
  padding-bottom: 41px;
}
.footer button:nth-child(1) {
  background-color: white;
  padding: 15px 31px;
  border: 1px solid rgb(0, 81, 255);
  border-radius: 50px;
  color: rgb(0, 81, 255);
}
.footer button:nth-child(2) {
  background-color: rgb(0, 81, 255);
  padding: 15px 31px;
  margin-left: 31px;
  border-radius: 50px;
  color: white;
}
.banner {
  background-color: #ccc;
  height: 32vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-image: url("@/static/img/register_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.banner .step {
  width: 1200px;
  height: 135px;
  background-color: #f1f4f6;
  display: flex;
  justify-content: center;
  justify-items: center;
}
.jd_box {
  display: flex;
  align-items: center;
}
.jd_zt {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jd_zt .pot {
  background-color: #e4e9f1;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #abb7c4;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.jd_zt .pot .a_pot {
  background-color: rgb(0, 81, 255);
  border-radius: 50%;
  color: white;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
}
.jd_zt .line {
  width: 90px;
  height: 3px;
  background-color: #e4e9f1;
}
.jd_zt .unline {
  width: 80px;
  height: 3px;
  background-color: #f1f4f6;
}
.jd_t {
  margin-top: 15px;
  text-align: center;
  color: #abb7c4;
}
</style>
